<script setup>
	import { ref } from 'vue'
	import { addressListApi } from '@/services/address'
	import { preOrderApi, createOrderApi } from '@/services/medicine'
	import { paymentApi } from '@/services/payment'
	const props = defineProps({
		// 处方id
		prescriptionId: String,
	})
	// custom-payment组件ref
	const payment = ref()
	// 收货地址信息
	const addressInfo = ref({})
	const preOrderInfo = ref([])
	const orderId = ref('')
	function close() {
		payment.value.hidePayment()
	}
	// 获取地址
	async function getAddressList() {
		const { code, data, message } = await addressListApi()
		if (code !== 10000) return uni.utils.toast(message)
		addressInfo.value = data[0]
	}
	// 获取预付订单
	async function getPreOrder() {
		const { code, data, message } = await preOrderApi(props.prescriptionId)
		if (code !== 10000) return uni.utils.toast(message)
		preOrderInfo.value = data
	}
	// 立即支付
	async function onPaymentButtonClick() {
		const { code, data, message } = await createOrderApi(
			props.prescriptionId,
			addressInfo.value.id
		)
		if (code !== 10000) return uni.utils.toast(message)
		orderId.value = data.id
		payment.value.showPayment()
	}
	getAddressList()
	getPreOrder()
	// 支付
	async function confirm(index) {
		if (index === 0) return uni.utils.toast('暂不支持微信支付!')
		const { code, data, message } = await paymentApi({
			paymentMethod: index,
			orderId: orderId.value,
			payCallback:
				'http://localhost/subpkg_medicine/pay_result/index',
		})

		// 接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)

		// #ifdef H5
		window.location.href = data.payUrl
		// #endif

		// #ifdef MP-WEIXIN
		wx.requestPayment({
			//4个参数
		})
		// #endif
	}
</script>
<template>
	<scroll-page background-color="#f6f6f6">
		<view class="payment-page">
			<view class="page-header">
				<view class="order-shippment">
					<view class="region">
						<uni-icons size="16" color="#FF7702" type="location-filled" />
						<text>{{ addressInfo.city }}</text>
					</view>
					<view class="detail"> {{ addressInfo.addressDetail }} </view>
					<view class="receiver">
						{{ addressInfo.receiver }} {{ addressInfo.mobile }}
					</view>
				</view>
			</view>
			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<view class="medicine-list">
				<view
					class="medicine-list-item"
					v-for="medicine in preOrderInfo.medicines"
					:key="medicine.id"
				>
					<view class="content">
						<image
							:src="medicine.avatar"
							mode="aspectFill"
							class="medicine-avator"
						></image>
						<view class="medicine-info">
							<view class="info">
								<text class="name">{{ medicine.name }}</text>
								<text
									class="number"
									:class="{ symbol: medicine.prescriptionFlag === 1 }"
									>{{ medicine.specs }}</text
								>
								<text class="price">¥{{ medicine.amount }}</text>
							</view>
							<view class="quantity"> x{{ medicine.quantity }} </view>
						</view>
					</view>
					<view class="guide">用法用量：{{ medicine.usageDosag }}</view>
				</view>
			</view>
			<view class="blank"> </view>
			<uni-list :border="false">
				<uni-list-item
					title="药品金额"
					:right-text="'¥' + preOrderInfo.payment"
				>
				</uni-list-item>
				<uni-list-item title="运费" :right-text="'¥' + preOrderInfo.expressFee">
				</uni-list-item>
				<uni-list-item
					title="优惠劵"
					show-arrow
					:right-text="`-¥${preOrderInfo.couponDeduction}`"
				>
				</uni-list-item>
				<uni-list-item
					title="实付款"
					:right-text="'¥' + preOrderInfo.actualPayment"
				>
				</uni-list-item>
			</uni-list>
			<!-- 底部 -->
			<view class="toolbar">
				<view class="total-amount">
					需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
				</view>
				<view class="buttons">
					<button class="uni-button" @click="onPaymentButtonClick">
						立即支付
					</button>
				</view>
			</view>
		</view>
	</scroll-page>
	<custom-payment
		ref="payment"
		@close="close"
		@confirm="confirm"
		:orderId="orderId"
		:amount="preOrderInfo.actualPayment"
	>
	</custom-payment>
</template>

<style lang="scss">
	.payment-page {
		padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
		.page-header {
			overflow: hidden;
			padding: 30rpx;
			background-color: #ebf9f7;

			.order-shippment {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				line-height: 1.75;
				.region {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #6f6f6f;
				}
				.detail {
					margin: 24rpx 0;
					font-size: 34rpx;
					color: #121826;
				}
				.receiver {
					font-size: 26rpx;
					color: #121826;
				}
			}
		}
		.order-shop {
			padding: 30rpx;
			font-size: 32rpx;
			color: #121826;
			font-weight: 500;
			line-height: 1;
			.alt {
				font-size: 24rpx;
				color: #979797;
			}
		}
		.medicine-list {
			overflow: hidden;
			padding: 30rpx;
			background-color: #fff;
			.medicine-list-item {
				border-bottom: 1px solid #f8f8f8;
				margin-top: 30rpx;

				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					border: none;
				}
				.content {
					display: flex;
				}

				.medicine-avator {
					width: 180rpx;
					height: 160rpx;
				}
				.medicine-info {
					display: flex;
					justify-content: space-between;
					margin-left: 15rpx;
					flex: 1;
					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name {
							font-size: 30rpx;
							font-weight: 500;
							color: #121826;
						}
						.number {
							font-size: 24rpx;
							color: #979797;

							&.symbol::before {
							
								margin-right: 20rpx;
								padding: 5rpx 10rpx;
								content: '处方药';
								line-height: 1;
								background-color: #31ca9d;
								color: #fff;
							}
						}

						.price {
							color: red;
							font-size: 32rpx;
						}
					}
					.quantity {
						font-size: 30rpx;
						color: #121826;
					}
				}
				.guide {
					overflow: hidden;
					margin: 20rpx 0;
					padding: 20rpx;
					background-color: #f6f6f6;
					color: #979797;
					font-size: 28rpx;
				}
			}
		}
		.blank {
			width: 750rpx;
			height: 40rpx;
			background-color: #f6f6f6;
		}
		:deep(.uni-icon-wrapper) {
			padding: 0 !important;
		}
		.toolbar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
			height: 88rpx;

			background-color: #fff;
			.total-amount {
				font-size: 28rpx;
				.number {
					margin-left: 10rpx;
					font-size: 40rpx;
					color: #eb5757;
				}
			}
			.buttons {
				flex: 1;
				padding: 0 30rpx;
			}
		}
	}
</style>
